<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .pipe {
            display: flex;
            width: 500px;
            padding: 10px;
            align-items: center;
            box-sizing: border-box;
            height: 9rem;
            overflow: hidden;
            flex-direction: column-reverse;
            padding-bottom: 0px;
            background: rgba(255, 0, 0, 0.4);
        }

        .item-container {}

        .item {
            border-radius: 100%;
            background: rgba(255, 255, 255, 0.2);
            font-size: 3rem;
            text-align: center;
            line-height: 4rem;
            width: 4rem;
            height: 4rem;
            margin: 0.2rem 0;
        }

        .container {
            background: #ddd;
            width: 500px;
            height: 200px;
            display: flex;
            flex-direction: row;
        }

        .left {
            flex: 1;
            background: rgba(0, 128, 0, 0.568);
        }

        .right {
            flex: 1;
            background: rgba(0, 0, 255, 0.493);
        }

        .left,
        .right {
            border: 2px solid #ddd;
            box-shadow: 0px -20px 20px 0px #bdbdbd;
            display: flex;
            align-items: flex-start;
            flex-direction: row;
            flex-flow: row-reverse wrap-reverse;
            justify-content: center;
        }
    </style>
</head>

<body>
    <div class="pipe">
        <div class="item-container">
        </div>
    </div>
    <div class="container">
        <div class="left">
        </div>
        <div class="right">
        </div>
    </div>

    <script>
        const items = [{
                txt: '👩‍🏭',
                type: 1
            },
            {
                txt: '🍔',
                type: 2
            },
            {
                txt: '👨‍🦯',
                type: 1
            },
            {
                txt: '🍟',
                type: 2
            },
            {
                txt: '🤦‍♂️',
                type: 1
            },
            {
                txt: '🌭',
                type: 2
            },
            {
                txt: '🥩',
                type: 2
            },
            {
                txt: '🧛‍♂️',
                type: 1
            },
            {
                txt: '🍚',
                type: 2
            },
            {
                txt: '🦸‍♂️',
                type: 1
            },
            {
                txt: '👩‍🚒',
                type: 1
            },
        ]

        class Box{
            constructor(el){
                this.el = el;
            }
            join(item){
                const div = document.createElement("div");
                div.innerHTML = item.txt;
                div.className = "item";

                this.el.append(div);
            }
        }
        class Checker{
            constructor(box){
                this.box = box;
            }
            process(item){
                if(this.check(item))
                    this.joinItem(item);
            }
            joinItem(item){
                this.box.join(item);
            }
        }
        class HuManChecker extends Checker{
            check(item){
                return item.type ===1;
            }
        }
        class FoodChecker extends Checker{
            check(item){
                return item.type ===2;
            }
        }

        const leftBox = new Box(document.querySelector(".left"))
        const rightBox = new Box(document.querySelector(".right"))

        const human = new HuManChecker(rightBox)
        const food = new FoodChecker(leftBox);

        const mappedItems = items.map(item=>{
            const div = document.createElement("div");
            div.innerHTML = item.txt;
            div.className = "item"
            item.el = div;
            return item;
        })

        mappedItems.forEach(item=>{
            document.querySelector(".item-container").append(item.el);
        })

        setInterval(() => {
            const popItem = mappedItems.pop();
            if(!popItem) return;

            human.process(popItem);
            food.process(popItem);

            popItem.el.remove();
        }, 1000);

       
    </script>
</body>

</html>